import React, { useState, useEffect, useRef } from 'react'
import { Breadcrumb, Button } from 'antd';
import '../../assets/css/menu.css'

import { menuList } from '../../request/api';


import List from './list'
import Dialog from './dialog'

export default function Menu() {
    const [menulist, setmenulist] = useState([])
    let toastInfo = useRef();
    useEffect(() => {
        getMenuList()
    },[])

    const getMenuList = async () => {
        let res = await menuList()
        if (res.code == 200) {
            setmenulist(res.list)
        }
    }

    const [isShow, setisShow] = useState(false);
    const [isAdd, setisAdd] = useState(true)

    function add() {
        setisShow(true)
        setisAdd(true)
    }
    const edit = (e) => {
        // console.log(e);
        setisShow(true)
        setisAdd(false)
        toastInfo.current.lookup(e);
    }
    const cancel = (e) => {
        // console.log(e);
        setisShow(e)
    }

    return (
        <div className='box'>
            <Breadcrumb className='bread'>
                <Breadcrumb.Item>
                    <a href="/index/home">首页</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                    <a href="#">菜单管理</a>
                </Breadcrumb.Item>
            </Breadcrumb>
            <Button className='btn' type="primary" size='small' onClick={() => add()}>添加</Button>
            <List menulist={menulist} getMenuList={getMenuList} edit={edit}></List>
            <Dialog cancel={cancel} isShow={isShow} isAdd={isAdd} menulist={menulist} getMenuList={getMenuList} ref={toastInfo}></Dialog>
        </div>
    )
}
